<template>
  <div id="check">暂无数据</div>
</template>

<script>
export default {
  name: "HomeCheck",
  components: {},
  data() {
    return {
      checkData: [250, 120, 200, 334, 390, 330, 220],
      dataInfo: ["引桥班组", "锚碇基坑班组", "锚碇班组", "上部结构班组", "危岩班组", "钢筋厂班组"],
      name: "在册人数"
    };
  },

  methods: {
    getCheckData (data) {
      let { xAxis, yAxis } = data;
      if (xAxis && yAxis) {
        this.dataInfo = xAxis;
        this.checkData = yAxis;
        this.getCheckInfo();
      }
    },


    getCheckInfo() {
      var echarts = require('echarts');
      var myChart = echarts.init(document.getElementById("check"));
      var option = {
        color: ["rgb(163, 86, 235)"],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
            lineStyle: {
              type: "dotted",
              opacity: 0.6
            }
          }
        },
        grid: {
          left: "1%",
          right: "1%",
          top: "14%",
          bottom: this.dataInfo.length > 4 ? "2%" : "8%",
          containLabel: true
        },
        xAxis: [
          {
            type: "category",
            axisLabel: {
              show: true,
              textStyle: {
                color: "rgba(255, 255, 255, 0.45)"
              },
              interval: 0,
              rotate: this.dataInfo.length > 4 ? 45 : 0
            },
            // 刻度隐藏
            axisTick: {
              alignWithLabel: true,
              show: false,
            },
            //x轴线的颜色以及宽度
            axisLine: {
              show: true,
              lineStyle: {
                color: "rgba(255,225,255,1)",
                width: 0,
                type: "solid"
              }
            },
            data: this.dataInfo
          }
        ],
        yAxis: [
          {
            type: "value",
            // 文字颜色
            axisLabel: {
              show: true,
              textStyle: {
                color: "rgba(255, 255, 255, 0.45)"
              }
            },
            //网格样式
            splitLine: {
              show: true,
              lineStyle:{
                color: ['rgba(255, 255, 255, 0.06)'],
                type: 'dashed'
              }
            },
            // 刻度隐藏
            axisTick: {
              show: false,
            },
            //x轴线的颜色以及宽度
            axisLine: {
              show: true,
              lineStyle: {
                color: "rgba(255,225,255,1)",
                width: 0,
                type: "solid"
              }
            }
          }
        ],
        series: [
          {
            name: this.name,
            type: "bar",
            barWidth: "45%",
            //设置柱状图渐变颜色
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0, 1, 0, 0,   // 0,0,1,0表示从左向右    0,0,0,1表示从右向左   0, 1, 0, 0从下向上
                  [
                    {offset: 1, color: '#FEE1AE'},
                    {offset: 0, color: '#F75675'}
                  ]
                )
              }
            },
            data: this.checkData
          }
        ]
      };

      myChart.setOption(option);
    }
  }
};
</script>

<style  scoped>
#check{
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #527db1;
}
</style>
